<template>
  <div class="playlist-box">
    <van-nav-bar :title="playlistAll.name"
      fixed
      @click-left="$router.back()">
      <template #left>
        <van-icon class="icon"
          name="arrow-left"
          size="22"
          color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 内容区域 -->
    <div class="list-container">

      <van-image class="img"
        fit="cover"
        width="100%"
        :src="playlistAll.coverImgUrl? playlistAll.coverImgUrl:''">
        <template v-slot:loading>
          <van-loading type="spinner"
          color="#1989fa"
            size="20" />
        </template>
      </van-image>
      <div class="hot-title">歌曲列表</div>
      <!-- 歌单详情 -->
      <van-list v-model="loading"
        class="list"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
        <!-- 音乐循环 -->
        <music-list @play="play" :newSongs="playlist"
          :showNum="true"></music-list>
      </van-list>
    </div>
  </div>
</template>

<script>

import { getPlayList } from '@/api/singer.js'
import MusicList from '@/components/music-list/music-list.vue'
import { mapMutations } from 'vuex'

export default {
  name: 'PlayList',
  props: {
    palyListID: {
      type: [Number, String],
      require: true
    }
  },
  data () {
    return {
      loading: false, // 加载状态
      finished: false, // 控制加载完成状态
      playlist: [], // 歌单列表
      playlistAll: [], // 歌单全部信息
      isShowTab: false // 控制tab栏的状态
    }
  },
  computed: {

  },
  created () {
    // console.log(12)
    // tab状态
    this.getShowTab(this.isShowTab)
  },
  methods: {
    ...mapMutations(['getShowTab']),
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const {
        data: res
      } = await getPlayList({
        id: this.palyListID
      })
      console.log(res)

      const results = res.playlist.tracks.map((v, index) => {
        v.song = {
          privilege: res.privileges[index],
          artists: v.ar,
          album: v.al
        }
        return v
      })

      console.log(results)
      this.playlistAll = res.playlist
      this.playlist.push(...results)
      this.loading = false

      // 判断数据是否加载完成
      this.finished = true
    },

    ...mapMutations(['getCurrentMusic']),
    play (e) {
      console.log(e)
      this.getCurrentMusic(e)
    }

  },
  components: {
    MusicList
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content{
  background-color: #242424;
  display: flex;
   justify-content: center;
   overflow: hidden;
 .van-nav-bar__title{

   color: #cccccc;
   margin: 0 20px;
  //  animation: gun 5s linear infinite normal;

 }
}
@keyframes gun {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(100%);
  }
}
.list-container{
 padding-top: 46px;

 .img{
   height: 200px;
 }
}

  .hot-title {
    height: 23 px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 13px;
    color: #666;

    background-color: #eeeff0;
  }
</style>
